<template>
  <view class="box">
    <div class="header">
      <!-- 搜索 -->
      <div style="width: 80%; margin: auto;">
        <input class="sou" style="border: 1px solid #ccc;color: #fff;" placeholder-style="font-size: 12px;"
          placeholder="请输入需要查询的经纪人" type="text" v-model.trim="value" @input="onChange">
        <div class="tan" v-show="value.length > 0 && sou.length > 0">
          <div v-for="(item, index) in sou" :key="index" style="padding:  2px 0;margin-bottom: 2px;"
            @click="broDetail(item)">
            {{ item.name }}</div>
        </div>
      </div>
      <!-- 前三名 -->
      <div class="san">
        <div class="item" @click="broDetail(sanData[1])" style="margin-top: 5%;">
          <image style="width: 100%; margin-top: 20%;"
            src="https://img2.baidu.com/it/u=238002833,4129388910&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400"
            mode="widthFix" />
          <div>
            {{ sanData[1]?.name }}
          </div>
          <div class="dw">
            No.2
          </div>
        </div>
        <div class="item" @click="broDetail(sanData[0])" style="width: 35%;height: 200px;">
          <image style="width: 100%;"
            src="https://img2.baidu.com/it/u=160552304,2429596528&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            mode="widthFix" />
          <div>
            {{ sanData[0]?.name }}
          </div>
          <div class="dw">
            No.1
          </div>
        </div>
        <div class="item" @click="broDetail(sanData[2])" style="margin-top: 5%;">
          <image style="width: 100%;margin-top: 20%;"
            src="https://img0.baidu.com/it/u=2433421369,4173391536&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            mode="widthFix" />
          <div>
            {{ sanData[2]?.name }}
          </div>
          <div class="dw">
            No.3
          </div>
        </div>
      </div>
    </div>
    <!-- 列表 -->
    <div class="mian">
      <div class="list_item" v-for="(item, index) in brokerData" :key="item.id">
        <uni-list-chat :avatar-circle="true" :title="item.name" :clickable="true"
          @click="broDetail(item)"
          avatar="https://img0.baidu.com/it/u=2395200391,679269744&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=632"
          :note="item.company">
          <view style="margin-top: 15px;">
            <uni-icons type="phone-filled" color="#999" size="25"></uni-icons>
            <uni-icons type="chat-filled" color="#999" size="25"></uni-icons>
          </view>
        </uni-list-chat>
      </div>
    </div>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const value = ref('');
const sou = ref([]);
const onChange = (e) => {
  value.value = e.detail.value
  console.log(value.value);
  sou.value = ZongData.value.filter(t => t.name.includes(value.value))
  console.log(sou.value);
}
// 经纪人数据
const brokerData = ref([])
// 总数据
const ZongData = ref([])
// 前三
const sanData = ref([]);
// 经纪人 /api/v1/broker
const broker = () => {
  uni.request({
    method: 'GET',
    url: 'http://10.31.71.52:7002/api/v1/broker',
    data: {
      currentPage: '1',
      pageSize: '50'
    },
    success: (res) => {
      const newData = res.data.data.filter(t => t.status !== '离职')
      ZongData.value = res.data.data.filter(t => t.status !== '离职');
      newData.forEach((t) => {
        t.num = t.first_hand_house * 1 + t.lease_house * 1 + t.second_hand_house * 1
      })
      brokerData.value = newData.sort((a, b) => {
        return b.num - a.num
      })
      sanData.value = brokerData.value.slice(0, 3)
      brokerData.value.splice(0, 3)
    }
  })
};
onMounted(() => {
  broker();
})
// 详情页
const broDetail = (value) => {
  uni.navigateTo({
    url: '../broker_Details/broker_Details?item=' + JSON.stringify(value),
  })
}
</script>

<style scoped lang="scss">
.box {
  width: 100vw;
  height: 100vh;
}

.header {
  width: 100%;
  height: 250px;
  background: url(https://img2.baidu.com/it/u=3976697827,2881015680&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666) no-repeat;
  background-size: cover;
  background-position: 0 -120px;
  overflow: hidden;
  position: relative;

  .tan {
    width: 80%;
    background: rgba(255, 255, 255, 0.5);
    padding: 5px;
    box-sizing: border-box;
    border-radius: 3px;
    position: absolute;
    top: 31px;
    left: 37px;
    font-size: 12px;
  }

  .sou {
    margin-top: 10px;
    border-radius: 5px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 12px;
  }

  .san {
    margin: 0 auto;
    margin-top: 20%;
    width: 80%;
    height: 50%;
    display: flex;

    .item {
      width: 25%;
      height: 200px;
      background: #fff;
      padding: 10px;
      text-align: center;
      border-radius: 10px;
      position: relative;

      image {
        border-radius: 10px;
      }

      .dw {
        position: absolute;
        top: 10px;
        left: 10px;
        background: pink;
        padding: 5px;
        box-sizing: border-box;
        border-radius: 10px;
        font-size: 12px;
        color: #000;
      }
    }
  }
}
</style>
